<template>
	<div>
		<el-row :span="24" style="margin:26px 0 0;">
			<div style="display: flex;justify-content: flex-start;">
				<p @click="navToOperationHome()" class="tabHeader">首页</p>
				<p @click="navTomerchant()" class="tabHeader">商家</p>
				<p @click="navToPersonal()" class="tabHeader">个人中心</p>
				<p @click="navToCkBanner()" class="tabHeader">创客</p>
				<p style="color: #409eff;border-bottom: 0;" class="tabHeader">启动广告</p>
				<p @click="navTocity()" class="tabHeader">城主页面</p>
			</div>
			<el-row style="margin-top: 20px;">
				<!-- <el-button @click="edit('addSJ')" class="btnPad " type="primary">新建</el-button> -->
				<el-button class="btnPad " type="primary" @click="edit('add')">增加
				</el-button>
				<el-button @click="getStartBannerList(1)" :class="[isActive==true?'btnChoose':'btnPad'] " plain>banner</el-button>
			</el-row>
		</el-row>
		<div style="margin-top: 20px;">

		<el-table
		        :data="pageInfo.dtos"
		        v-loading="table_loading"
		        element-table_loading-text="加载中"
		        stripe
		        style="width: 100%">
		    <el-table-column
		            prop="imgCode"
		            label="广告序号">
		    </el-table-column>
		    <el-table-column
		            width="150"
		            label="广告封面">
		            <template scope="scope">
		                <img class="banner" :src="scope.row.imgUrl">
		            </template>
		    </el-table-column>
		    <el-table-column
		            prop="stayTime"
		            label="停留时间">
		    </el-table-column>
		    <el-table-column
		            prop="redirectUrl"
		            label="是否跳转">
		            <template scope="scope">
		                <span>{{ scope.row.isRedirect=='1'? '是':'否' }}</span>
		            </template>
		    </el-table-column>
		    <el-table-column
		            prop="redirectUrl"
		            label="跳转链接">
		    </el-table-column>
		     <el-table-column
		            prop="redirectUrl"
		            label="状态">
		            <template scope="scope">
		                 <span>{{ scope.row.isShow==1? '显示':'不显示'}}</span>
		            </template>
		    </el-table-column>
		    <el-table-column
		            sortable='custom'
		            prop="upd_Time"
		            label="最后编辑时间">
		            <template scope="scope">
		                <span>{{scope.row.updTime}}</span>
		            </template>
		    </el-table-column>
		    <el-table-column label="操作" width="150">
		        <template scope="scope">
		            <el-button
		                    size="small"
		                    type="primary"
		                    @click="edit(scope.row.imgCode)">编辑
		            </el-button>
		            <el-button
		                    size="small"
		                    :type="scope.row.isShow==1? 'danger':'success'"
		                    @click="using(scope.row)">{{scope.row.isShow==1? '禁用':'启用'}}
		            </el-button>
		        </template>
		    </el-table-column>
		</el-table>
		<div class="paginate">
		    <el-pagination
		            @current-change="handleCurrentChange"
		            :current-page="pageInfo.pageNum"
		            :page-size="pageInfo.pageSize"
		            layout="total, prev, pager, next, jumper"
		            :total="pageInfo.count">
		    </el-pagination>
		</div>
		</div>
		</div>
</template>

<script>
	export default {
		data() {
			return {
				isActive:true,
				pageInfo: {
				    pageNum: 1,
				    pageSize: 10,
				    count: 1,
				    dtos:[]
				},
				table_loading:false,
				hashrefType:['单商品','多商品','链接','品牌','文章'],
				URL:URL,
				desc:'DESC',
				sort:'CRE_TIME'
			}
		},

		activated() {
			this.getStartBannerList(1);
		},
		mounted() {

		},
		methods: {
			navToPersonal() {
				/**
				 * 方法说明
				 * author: liuchen
				 * description:
				 * @param 前往个人中心
				 * @return
				 * @createTime: 2020-8-6 18:42:09
				 */
				this.$router.push('/official/personal_center')
			},
			navToStartBanner() {
				/**
				 * 方法说明
				 * author: liuchen
				 * description:
				 * @param 前往开机广告
				 * @return
				 * @createTime: 2020-8-6 18:42:09
				 */
				this.$router.push('/official/start_bannerList')
			},
			navTomerchant() {
				/**
				 * 方法说明
				 * author: liuchen
				 * description:
				 * @param 前往商家
				 * @return
				 * @createTime: 2020-8-7 14:40:53
				 */
				this.$router.push('/official/merchantOperation')
			},
			navToOperationHome() {
				/**
				 * 方法说明
				 * author: liuchen
				 * description:
				 * @param 前往首页
				 * @return
				 * @createTime: 2020-8-7 14:41:54
				 */
				this.$router.push('/official/activityOperate')
			},
			navToCkBanner() {
				/**
				 * 方法说明
				 * author: liuchen
				 * description:
				 * @param 前往创客
				 * @return
				 * @createTime: 2020-8-7 14:43:16
				 */
				this.$router.push('/official/ck_bannerList')
			},
			navTocity() {
				this.$router.push('/official/city_master')
			},
			edit(id){
			  this.$router.push('/official/banner_detail/'+id)
			},
			getStartBannerList(page = 1) {
				/**
				 * 方法说明
				 * author: liuchen
				 * description:
				 * @param 获取开机广告列表
				 * @return
				 * @createTime: 2020-8-7 16:07:07
				 */
				this.table_loading = true;
				this.pageInfo.pageNum = page
        // console.log('传的页数==',this.pageInfo.pageNum)
				this.dataApi.ajax('selectPageSysAppStartImg', {pageNum: this.pageInfo.pageNum,sort:this.sort,desc:this.desc,pageSize:this.pageInfo.pageSize}, res => {
				    this.table_loading = false;
				    if (res.responseType === 'S') {
				        this.pageInfo = res
				    }
				});
			},
			handleCurrentChange(val) {
			    this.getStartBannerList(val)
			},
			using(item){
			     var type=''
			     var state=''
			     let data=generateObj(item)
			      if (data.isShow=='1') {
			         type='禁用'
			         state='0'
			      }else{
			        type='启用'
			        state='1'
			      }
			      data.isShow=state
			      this.$confirm('确定'+type+'?', '提示', {
			         confirmButtonText: '确定',
			         cancelButtonText: '取消',
			         type: 'warning'
			       }).then(() => {
			          this.dataApi.ajax('editSysAppStartImg',data, res => {
			           if (res.responseType === 'S') {
			              this.showMsg(type+'成功')
			               this.getStartBannerList(this.pageInfo.pageNum)
			           }
			        });
			       }).catch(() => {

			       });
			},

		}
	}
</script>


<style>
	.tabHeader {
		width: 100px;
		text-align: center;
		display: inline-block;
		padding: 5px 10px;
		margin: 0;
		border: 1px solid #909399;
		border-right: 0;
		cursor: pointer;
	}

	.tabHeader:last-child {
		width: 100px;
		text-align: center;
		display: inline-block;
		padding: 5px 10px;
		margin: 0;
		border: 1px solid #909399;
	}

	.el-radio-button__orig-radio:checked+.el-radio-button__inner {
		border-bottom-color: #FFFFFF;
		background-color: #FFFFFF;
		color: #20a0ff;
	}

	.btnPad {
		width: 120px;
		text-align: center;
	}

	.btnChoose {
		width: 120px;
		text-align: center;
		border: 1px solid #20a0ff;
		color: #20a0ff;
	}
</style>
